<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { User, Document, Calendar, Edit, Folder, ArrowDown, Phone, Message } from '@element-plus/icons-vue'

// 通知数据
const notifications = ref([
  { title: '新冠疫苗预约通知', time: '10:30', status: '已发布' },
  { title: '员工会议预约提醒', time: '09:15', status: '更新' }
])

// 统计数据
const totalPatients = ref(646)
const todayAppointments = ref(40)
const revisitPatients = ref(16)
const initialVisitPatients = ref(30)

// 下一位就诊患者信息
const nextPatient = ref({
  name: '刘医健',
  gender: '男',
  age: 40,
  phone: '18612345055',
  visitType: '神经内科',
  doctor: '张伟峰 | 主任医师',
  bloodPressure: '106',
  heartRate: '125/83',
  history: '无',
  allergies: '青霉素 90%/分'
})

// 当前叫号
const currentNumber = ref('G08')
const timeRange = ref('10:30-11:00')
const waitingCount = ref(8)

// 快捷操作数据
const quickActions = ref([
  { name: '收费查询', count: 45 },
  { name: '手术日程', count: 10 },
  { name: '视频会议', count: 12 }
])

// 患者预约列表
const patientList = ref([
  { name: '郑建', gender: '女', age: 30, phone: '13073757782', department: '内科', doctor: '李建华', time: '2024/04/03 08:30', status: '诊疗中' },
  { name: '赵家豪', gender: '男', age: 25, phone: '18434214200', department: '内科', doctor: '赵健霖', time: '2024/04/03 08:40', status: '等待中' },
  { name: '周捷', gender: '女', age: 28, phone: '18679540303', department: '内科', doctor: '王宝军', time: '2024/04/03 08:40', status: '诊疗中' },
  { name: '赵文兵', gender: '男', age: 37, phone: '18422817453', department: '内科', doctor: '孙振诚', time: '2024/04/03 08:45', status: '诊疗中' },
  { name: '郑明胜', gender: '男', age: 42, phone: '15237314905', department: '内科', doctor: '吴德学', time: '2024/04/03 09:30', status: '等待中' },
  { name: '张春阳', gender: '女', age: 18, phone: '18749318661', department: '内科', doctor: '李伟', time: '2024/04/03 09:30', status: '等待中' }
])

// 医生列表
const doctorList = ref([
  { name: '何新涛', title: '心脏专科医', avatar: '' },
  { name: '吴道德', title: '骨科医生', avatar: '' },
  { name: '赵健霖', title: '内科', avatar: '' },
  { name: '徐伟杰', title: '外科医生', avatar: '' },
  { name: '郑新凯', title: '内科医生', avatar: '' }
])

// 公告通知
const announcements = ref([
  { date: '2023.04.23', title: '三一假期值班通知', status: '已发布' },
  { date: '2023.04.20', title: '院内通知', status: '已发布' },
  { date: '2023.04.18', title: '五月病内会议安排', status: '已发布' }
])

// 日程表数据
const scheduleDate = ref(new Date())
const scheduleEvents = ref([
  { time: '07:00 am', title: '住院医查房', type: 'primary' },
  { time: '08:00 am', title: '科室会议', type: 'warning' },
  { time: '09:30 am', title: '门诊', type: 'danger' },
  { time: '01:00 pm', title: '患者手术安排', type: 'success' },
  { time: '03:00 pm', title: '门诊', type: 'danger' }
])

// 初始化图表
onMounted(() => {
  try {
    initGenderChart()
    initWeeklyChart()
  } catch (error) {
    console.error('初始化图表失败:', error)
  }
})

// 初始化性别比例图表
const initGenderChart = () => {
  const chartDom = document.getElementById('gender-chart')
  if (!chartDom) return

  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: 'center'
    },
    series: [
      {
        name: '患者性别',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 60, name: '男性', itemStyle: { color: '#8378EA' } },
          { value: 40, name: '女性', itemStyle: { color: '#E686B0' } }
        ]
      }
    ]
  }

  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 初始化周患者统计图表
const initWeeklyChart = () => {
  const chartDom = document.getElementById('weekly-chart')
  if (!chartDom) return

  const myChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男性', '女性']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#8378EA'
        },
        data: [320, 180, 390, 430, 480, 530, 420]
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#E686B0'
        },
        data: [250, 320, 410, 340, 390, 450, 380]
      }
    ]
  }

  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case '诊疗中':
      return 'primary'
    case '等待中':
      return 'warning'
    case '已完成':
      return 'success'
    default:
      return 'info'
  }
}
</script>

<template>
  <div class="overview-container">
    <!-- 顶部统计卡片区域 -->
    <div class="stats-row">
      <el-card class="stats-card total-patients">
        <div class="stats-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-title">总就诊人数</div>
          <div class="stats-value">{{ totalPatients }} <span class="stats-unit">人</span></div>
        </div>
      </el-card>

      <el-card class="stats-card today-appointments">
        <div class="stats-content">
          <div class="stats-title">今日预约门诊</div>
          <div class="stats-value">{{ todayAppointments }} <span class="stats-unit">人</span></div>
        </div>
      </el-card>

      <el-card class="stats-card revisit">
        <div class="stats-content">
          <div class="stats-title">复诊</div>
          <div class="stats-value">{{ revisitPatients }} <span class="stats-unit">人</span></div>
        </div>
      </el-card>

      <el-card class="stats-card initial-visit">
        <div class="stats-content">
          <div class="stats-title">初诊</div>
          <div class="stats-value">{{ initialVisitPatients }} <span class="stats-unit">人</span></div>
        </div>
      </el-card>
    </div>

    <!-- 中间内容区域 -->
    <div class="content-area">
      <!-- 左侧区域 -->
      <div class="left-column">
        <!-- 下一位就诊患者信息 -->
        <el-card class="patient-info-card">
          <div class="card-header">
            <span>下一位就诊患者信息</span>
          </div>
          <div class="patient-info">
            <div class="info-row">
              <span class="info-label">姓名：</span>
              <span class="info-value">{{ nextPatient.name }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">性别：</span>
              <span class="info-value">{{ nextPatient.gender }}</span>
              <span class="info-label" style="margin-left: 20px">年龄：</span>
              <span class="info-value">{{ nextPatient.age }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">联系电话：</span>
              <span class="info-value">{{ nextPatient.phone }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">预约门诊：</span>
              <span class="info-value">{{ nextPatient.visitType }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">接诊医生：</span>
              <span class="info-value">{{ nextPatient.doctor }}</span>
            </div>
            <div class="info-divider"></div>
            <div class="info-row">
              <span class="info-label">患者基本情况</span>
            </div>
            <div class="info-row">
              <span class="info-label">血压：</span>
              <span class="info-value">{{ nextPatient.bloodPressure }}</span>
              <span class="info-label" style="margin-left: 20px">心率：</span>
              <span class="info-value">{{ nextPatient.heartRate }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">既往史：</span>
              <span class="info-value">{{ nextPatient.history }}</span>
              <span class="info-label" style="margin-left: 20px">过敏源：</span>
              <span class="info-value">{{ nextPatient.allergies }}</span>
            </div>
          </div>
          <div class="action-button">
            <el-button type="primary" size="small">开始就诊</el-button>
          </div>
        </el-card>

        <!-- 诊疗记录快捷入口 -->
        <div class="shortcut-cards">
          <el-card class="shortcut-card">
            <div class="shortcut-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="shortcut-text">诊疗记录</div>
          </el-card>
          <el-card class="shortcut-card">
            <div class="shortcut-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="shortcut-text">手术排期</div>
          </el-card>
          <el-card class="shortcut-card">
            <div class="shortcut-icon">
              <el-icon><Edit /></el-icon>
            </div>
            <div class="shortcut-text">开药记录</div>
          </el-card>
          <el-card class="shortcut-card">
            <div class="shortcut-icon">
              <el-icon><Folder /></el-icon>
            </div>
            <div class="shortcut-text">查房记录</div>
          </el-card>
        </div>

        <!-- 患者性别比例 -->
        <el-card class="chart-card">
          <div class="card-header">
            <span>患者性别</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                本周 <el-icon><ArrowDown /></el-icon>
              </span>
            </el-dropdown>
          </div>
          <div id="gender-chart" class="chart-container"></div>
          <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color male"></div>
              <div class="legend-text">男性</div>
              <div class="legend-value">60%</div>
            </div>
            <div class="legend-item">
              <div class="legend-color female"></div>
              <div class="legend-text">女性</div>
              <div class="legend-value">40%</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 中间区域 -->
      <div class="middle-column">
        <!-- 当前叫号 -->
        <el-card class="call-number-card">
          <div class="card-header">
            <span>当前叫号</span>
          </div>
          <div class="call-number">
            <div class="number">{{ currentNumber }} <span class="number-unit">号</span></div>
          </div>
          <div class="call-info">
            <div class="info-item">
              <span class="info-label">预约时段：</span>
              <span class="info-value">{{ timeRange }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">等候患者：</span>
              <span class="info-value">{{ waitingCount }} 位</span>
            </div>
          </div>
        </el-card>

        <!-- 周患者统计 -->
        <el-card class="chart-card">
          <div class="card-header">
            <span>周患者统计</span>
          </div>
          <div id="weekly-chart" class="chart-container"></div>
        </el-card>

        <!-- 患者预约列表 -->
        <el-card class="patient-list-card">
          <div class="card-header">
            <span>患者预约列表</span>
            <el-link type="primary">查看全部</el-link>
          </div>
          <el-table :data="patientList" style="width: 100%" size="small">
            <el-table-column prop="name" label="姓名" width="70" />
            <el-table-column prop="gender" label="性别" width="60" />
            <el-table-column prop="age" label="年龄" width="60" />
            <el-table-column prop="phone" label="电话号码" width="120" />
            <el-table-column prop="department" label="科室" width="80" />
            <el-table-column prop="doctor" label="医生" width="80" />
            <el-table-column prop="time" label="预约时间" width="140" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 右侧区域 -->
      <div class="right-column">
        <!-- 医生信息 -->
        <el-card class="doctor-info-card">
          <div class="doctor-profile">
            <el-avatar :size="50" src="">张伟峰</el-avatar>
            <div class="doctor-details">
              <div class="doctor-name">张伟峰</div>
              <div class="doctor-title">主任医师 心血管科</div>
              <div class="doctor-hospital">三甲 · 附属中心医院</div>
            </div>
          </div>
        </el-card>

        <!-- 快捷操作 -->
        <div class="quick-action-cards">
          <el-card v-for="(action, index) in quickActions" :key="index" class="quick-action-card">
            <div class="action-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-name">{{ action.name }}</div>
              <div class="action-count">{{ action.count }}</div>
            </div>
          </el-card>
        </div>

        <!-- 日程表 -->
        <el-card class="schedule-card">
          <div class="card-header">
            <span>日程表</span>
          </div>
          <div class="calendar-header">
            <div class="weekday-row">
              <div class="weekday" v-for="(day, index) in ['日', '一', '二', '三', '四', '五', '六']" :key="index">
                {{ day }}
              </div>
            </div>
            <div class="date-row">
              <div class="date-item" v-for="i in 7" :key="i" :class="{ 'current': i === 3 }">
                {{ 25 + i }}
              </div>
            </div>
          </div>
          <div class="schedule-timeline">
            <div v-for="(event, index) in scheduleEvents" :key="index" class="schedule-event" :class="`event-${event.type}`">
              <div class="event-time">{{ event.time }}</div>
              <div class="event-title">{{ event.title }}</div>
            </div>
          </div>
        </el-card>

        <!-- 医生列表 -->
        <el-card class="doctor-list-card">
          <div class="card-header">
            <span>医生列表</span>
            <el-link type="primary">查看全部</el-link>
          </div>
          <div class="doctor-list">
            <div v-for="(doctor, index) in doctorList" :key="index" class="doctor-item">
              <el-avatar :size="40">{{ doctor.name.charAt(0) }}</el-avatar>
              <div class="doctor-item-info">
                <div class="doctor-item-name">{{ doctor.name }}</div>
                <div class="doctor-item-title">{{ doctor.title }}</div>
              </div>
              <div class="doctor-actions">
                <el-button circle size="small" type="primary" plain>
                  <el-icon><Phone /></el-icon>
                </el-button>
                <el-button circle size="small" type="info" plain>
                  <el-icon><Message /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 公告通知 -->
        <el-card class="announcement-card">
          <div class="card-header">
            <span>公告通知</span>
          </div>
          <div class="announcement-list">
            <div v-for="(item, index) in announcements" :key="index" class="announcement-item">
              <div class="announcement-date">{{ item.date }}</div>
              <div class="announcement-content">
                <div class="announcement-title">{{ item.title }}</div>
                <el-tag size="small" type="success">{{ item.status }}</el-tag>
              </div>
              <el-link type="primary" class="announcement-link">查看详情</el-link>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.overview-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 顶部统计卡片样式 */
.stats-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stats-card {
  flex: 1;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: #409EFF;
}

.stats-content {
  flex: 1;
}

.stats-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stats-unit {
  font-size: 14px;
  font-weight: normal;
  margin-left: 5px;
}

.total-patients {
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.today-appointments {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.revisit {
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.initial-visit {
  background-color: #fef0f0;
  border-color: #fde2e2;
}

/* 内容区域布局 */
.content-area {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.left-column {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.middle-column {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-column {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 卡片通用样式 */
.el-card {
  border-radius: 12px;
  margin-bottom: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 患者信息卡片 */
.patient-info-card {
  height: auto;
}

.patient-info {
  padding: 15px 20px;
}

.info-row {
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.info-label {
  color: #606266;
  margin-right: 5px;
}

.info-value {
  color: #303133;
  font-weight: 500;
  margin-right: 15px;
}

.info-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 15px 0;
}

.action-button {
  padding: 0 20px 15px;
  text-align: center;
}

/* 快捷入口卡片 */
.shortcut-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shortcut-card {
  width: calc(50% - 5px);
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.shortcut-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shortcut-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #409EFF;
}

.shortcut-text {
  font-size: 14px;
  color: #606266;
}

/* 图表卡片 */
.chart-card {
  height: auto;
}

.chart-container {
  height: 250px;
  padding: 10px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}

.legend-color.male {
  background-color: #8378EA;
}

.legend-color.female {
  background-color: #E686B0;
}

.legend-text {
  font-size: 12px;
  color: #606266;
  margin-right: 5px;
}

.legend-value {
  font-size: 12px;
  color: #303133;
  font-weight: bold;
}

/* 当前叫号卡片 */
.call-number-card {
  height: auto;
}

.call-number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.number {
  font-size: 48px;
  font-weight: bold;
  color: #409EFF;
}

.number-unit {
  font-size: 16px;
  margin-left: 5px;
}

.call-info {
  display: flex;
  justify-content: space-around;
  padding: 0 20px 15px;
}

.info-item {
  font-size: 14px;
}

/* 患者预约列表卡片 */
.patient-list-card {
  flex: 1;
}

/* 医生信息卡片 */
.doctor-info-card {
  padding: 20px;
}

.doctor-profile {
  display: flex;
  align-items: center;
}

.doctor-details {
  margin-left: 15px;
}

.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.doctor-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.doctor-hospital {
  font-size: 12px;
  color: #909399;
}

/* 快捷操作卡片 */
.quick-action-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-action-card {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-action-card:hover {
  transform: translateX(3px);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: #409EFF;
}

.action-content {
  flex: 1;
}

.action-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.action-count {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

/* 日程表卡片 */
.schedule-card {
  height: auto;
}

.calendar-header {
  padding: 15px;
}

.weekday-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.weekday {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #606266;
}

.date-row {
  display: flex;
  justify-content: space-around;
}

.date-item {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.date-item.current {
  background-color: #409EFF;
  color: white;
}

.schedule-timeline {
  padding: 0 15px 15px;
}

.schedule-event {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.event-primary {
  border-left-color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

.event-success {
  border-left-color: #67C23A;
  background-color: rgba(103, 194, 58, 0.1);
}

.event-warning {
  border-left-color: #E6A23C;
  background-color: rgba(230, 162, 60, 0.1);
}

.event-danger {
  border-left-color: #F56C6C;
  background-color: rgba(245, 108, 108, 0.1);
}

.event-time {
  width: 80px;
  font-size: 12px;
  color: #606266;
}

.event-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

/* 医生列表卡片 */
.doctor-list-card {
  height: auto;
}

.doctor-list {
  padding: 15px;
}

.doctor-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.doctor-item:last-child {
  border-bottom: none;
}

.doctor-item-info {
  flex: 1;
  margin-left: 10px;
}

.doctor-item-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.doctor-item-title {
  font-size: 12px;
  color: #909399;
}

.doctor-actions {
  display: flex;
  gap: 5px;
}

/* 公告通知卡片 */
.announcement-card {
  height: auto;
}

.announcement-list {
  padding: 15px;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-date {
  width: 80px;
  font-size: 12px;
  color: #909399;
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  font-size: 14px;
  margin-bottom: 5px;
}

.announcement-link {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .content-area {
    flex-direction: column;
  }

  .left-column,
  .middle-column,
  .right-column {
    width: 100%;
  }
}
</style>
